<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>音乐在线播放器 - 23215220329-牟其鑫</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #1e2a78, #ff758c);
            color: white;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .container {
            width: 90%;
            max-width: 800px;
            background-color: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        h1 {
            font-size: 28px;
            margin-bottom: 10px;
        }
        
        .student-info {
            font-size: 16px;
            opacity: 0.8;
            margin-bottom: 20px;
        }
        
        .player {
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        
        .cover {
            width: 200px;
            height: 200px;
            border-radius: 50%;
            object-fit: cover;
            margin-bottom: 20px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
            animation: rotate 20s linear infinite;
            animation-play-state: paused;
        }
        
        .player.playing .cover {
            animation-play-state: running;
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .song-info {
            text-align: center;
            margin-bottom: 20px;
            width: 100%;
        }
        
        .song-title {
            font-size: 22px;
            margin-bottom: 5px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .artist {
            font-size: 16px;
            opacity: 0.7;
        }
        
        .progress-container {
            width: 100%;
            height: 6px;
            background-color: rgba(255, 255, 255, 0.3);
            border-radius: 3px;
            margin-bottom: 20px;
            cursor: pointer;
        }
        
        .progress {
            height: 100%;
            background-color: #ff758c;
            border-radius: 3px;
            width: 0%;
            transition: width 0.1s linear;
        }
        
        .time-info {
            display: flex;
            justify-content: space-between;
            width: 100%;
            margin-bottom: 20px;
            font-size: 14px;
            opacity: 0.8;
        }
        
        .controls {
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 30px;
        }
        
        .control-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            margin: 0 15px;
            cursor: pointer;
            transition: transform 0.2s;
        }
        
        .control-btn:hover {
            transform: scale(1.1);
        }
        
        .control-btn:active {
            transform: scale(0.95);
        }
        
        .play-btn {
            background-color: #ff758c;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 28px;
            box-shadow: 0 5px 15px rgba(255, 117, 140, 0.4);
        }
        
        .playlist {
            width: 100%;
            max-height: 200px;
            overflow-y: auto;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px;
        }
        
        .playlist-item {
            padding: 10px 15px;
            border-radius: 5px;
            margin-bottom: 5px;
            cursor: pointer;
            transition: background-color 0.2s;
            display: flex;
            justify-content: space-between;
        }
        
        .playlist-item:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }
        
        .playlist-item.active {
            background-color: rgba(255, 117, 140, 0.3);
        }
        
        .playlist-item .song-name {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            flex: 1;
        }
        
        .playlist-item .song-duration {
            opacity: 0.7;
            margin-left: 15px;
        }
        
        /* 滚动条样式 */
        .playlist::-webkit-scrollbar {
            width: 8px;
        }
        
        .playlist::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 4px;
        }
        
        .playlist::-webkit-scrollbar-thumb {
            background: rgba(255, 255, 255, 0.3);
            border-radius: 4px;
        }
        
        .playlist::-webkit-scrollbar-thumb:hover {
            background: rgba(255, 255, 255, 0.5);
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <h1>音乐在线播放器</h1>
            <div class="student-info">学号：23215220329 | 姓名：牟其鑫</div>
        </header>
        
        <div class="player">
            <img src="mou.jpg" alt="专辑封面" class="cover" id="cover">
            
            <div class="song-info">
                <h2 class="song-title" id="song-title">歌曲名称</h2>
                <p class="artist" id="artist">歌手名称</p>
            </div>
            
            <div class="progress-container" id="progress-container">
                <div class="progress" id="progress"></div>
            </div>
            
            <div class="time-info">
                <span id="current-time">0:00</span>
                <span id="duration">0:00</span>
            </div>
            
            <div class="controls">
                <button class="control-btn" id="prev-btn">
                    <i class="fas fa-step-backward">⏮</i>
                </button>
                <button class="control-btn play-btn" id="play-btn">
                    <i class="fas fa-play">▶</i>
                </button>
                <button class="control-btn" id="next-btn">
                    <i class="fas fa-step-forward">⏭</i>
                </button>
            </div>
            
            <div class="playlist" id="playlist">
                <!-- 播放列表将通过JavaScript动态生成 -->
            </div>
        </div>
    </div>

    <audio id="audio"></audio>

    <script>
        // 音乐数据
        const songs = [
            {
                title: "Comfort chain",
                artist: "Instupendo",
                src: "Instupendo-Comfort Chain.mp3",
                cover: "Cc.png",
                duration: "3:04"
            },
            {
                title: "A Moment Apart",
                artist: "Odesza",
                src: "Odesza-A Moment Apart.mp3",
                cover: "AMA.png",
                duration: "3:54"
            },
            {
                title: "Rendezvous",
                artist: "Vivienne",
                src: "Vivienne-Rendezvous.mp3",
                cover: "Vv.png",
                duration: "3:33"
            },
            {
                title: "七里香",
                artist: "周杰伦",
                src: "周杰伦-七里香.mp3",
                cover: "7.png",
                duration: "4:59"
            },
            {
                title: "TruE",
                artist: "黄龄",
                src: "黄龄_HOYO-MiX-TruE-崩坏3《因你而在的故事》动画短片印象曲.mp3",
                cover: "T.png",
                duration: "3:07"
            }
        ];

        // 获取DOM元素
        const audio = document.getElementById('audio');
        const playBtn = document.getElementById('play-btn');
        const prevBtn = document.getElementById('prev-btn');
        const nextBtn = document.getElementById('next-btn');
        const cover = document.getElementById('cover');
        const songTitle = document.getElementById('song-title');
        const artist = document.getElementById('artist');
        const progress = document.getElementById('progress');
        const progressContainer = document.getElementById('progress-container');
        const currentTimeEl = document.getElementById('current-time');
        const durationEl = document.getElementById('duration');
        const playlistEl = document.getElementById('playlist');
        const player = document.querySelector('.player');

        // 当前歌曲索引
        let currentSongIndex = 0;
        let isPlaying = false;

        // 初始化播放器
        function initPlayer() {
            loadSong(songs[currentSongIndex]);
            renderPlaylist();
        }

        // 加载歌曲
        function loadSong(song) {
            songTitle.textContent = song.title;
            artist.textContent = song.artist;
            cover.src = song.cover;
            audio.src = song.src;
            
            // 重置进度条
            progress.style.width = '0%';
            currentTimeEl.textContent = '0:00';
            durationEl.textContent = song.duration;
        }

        // 渲染播放列表
        function renderPlaylist() {
            playlistEl.innerHTML = '';
            
            songs.forEach((song, index) => {
                const songEl = document.createElement('div');
                songEl.classList.add('playlist-item');
                if (index === currentSongIndex) {
                    songEl.classList.add('active');
                }
                
                songEl.innerHTML = `
                    <span class="song-name">${song.title} - ${song.artist}</span>
                    <span class="song-duration">${song.duration}</span>
                `;
                
                songEl.addEventListener('click', () => {
                    currentSongIndex = index;
                    loadSong(songs[currentSongIndex]);
                    playSong();
                    updatePlaylistActive();
                });
                
                playlistEl.appendChild(songEl);
            });
        }

        // 更新播放列表活动项
        function updatePlaylistActive() {
            const items = document.querySelectorAll('.playlist-item');
            items.forEach((item, index) => {
                if (index === currentSongIndex) {
                    item.classList.add('active');
                } else {
                    item.classList.remove('active');
                }
            });
        }

        // 播放歌曲
        function playSong() {
            isPlaying = true;
            player.classList.add('playing');
            playBtn.innerHTML = '<i class="fas fa-pause">⏸</i>';
            audio.play();
        }

        // 暂停歌曲
        function pauseSong() {
            isPlaying = false;
            player.classList.remove('playing');
            playBtn.innerHTML = '<i class="fas fa-play">▶</i>';
            audio.pause();
        }

        // 上一首
        function prevSong() {
            currentSongIndex--;
            if (currentSongIndex < 0) {
                currentSongIndex = songs.length - 1;
            }
            loadSong(songs[currentSongIndex]);
            playSong();
            updatePlaylistActive();
        }

        // 下一首
        function nextSong() {
            currentSongIndex++;
            if (currentSongIndex > songs.length - 1) {
                currentSongIndex = 0;
            }
            loadSong(songs[currentSongIndex]);
            playSong();
            updatePlaylistActive();
        }

        // 更新进度条
        function updateProgress(e) {
            const { duration, currentTime } = e.srcElement;
            const progressPercent = (currentTime / duration) * 100;
            progress.style.width = `${progressPercent}%`;
            
            // 更新当前时间
            const currentMinutes = Math.floor(currentTime / 60);
            let currentSeconds = Math.floor(currentTime % 60);
            if (currentSeconds < 10) {
                currentSeconds = `0${currentSeconds}`;
            }
            currentTimeEl.textContent = `${currentMinutes}:${currentSeconds}`;
        }

        // 设置进度条
        function setProgress(e) {
            const width = this.clientWidth;
            const clickX = e.offsetX;
            const duration = audio.duration;
            audio.currentTime = (clickX / width) * duration;
        }

        // 自动播放下一首
        function autoPlayNext() {
            nextSong();
        }

        // 事件监听
        playBtn.addEventListener('click', () => {
            isPlaying ? pauseSong() : playSong();
        });

        prevBtn.addEventListener('click', prevSong);
        nextBtn.addEventListener('click', nextSong);

        audio.addEventListener('timeupdate', updateProgress);
        audio.addEventListener('ended', autoPlayNext);
        progressContainer.addEventListener('click', setProgress);

        // 初始化
        initPlayer();
    </script>
</body>
</html>